<template>
  <el-row style="height: 72px;margin-bottom:6px;float: left;display: flex; justify-content: space-between;">

    <el-col class="cpuramioitem"
      style="margin-right: 6px; ">
      <el-progress type="dashboard" :percentage=cpuPercentageP :color=cpuColor text-color="#ffffff" :width="48" :stroke-width=1></el-progress>
      <span style="font-size: 12px; margin-top: -16px; color: #fff;">CPU</span>
    </el-col>

    <el-col class="cpuramioitem"
      style="margin-left: 6px;margin-right: 6px; ">
      <el-progress type="dashboard" :percentage=ramPercentageP :color=ramColor text-color="#ffffff" :width="48" :stroke-width=1></el-progress>
      <span style="font-size: 12px; margin-top: -16px; color: #fff;">RAM</span>
    </el-col>

    <el-col class="cpuramioitem"
      style="margin-left: 6px; ">
      <el-progress type="dashboard" :percentage=ioPercentageP :color=ioColor text-color="#ffffff" :width="48" :stroke-width=1></el-progress>
      <span style="font-size: 12px; margin-top: -16px; color: #fff;">I/O</span>
    </el-col>

  </el-row>
</template>

<script>


export default {
  name: "CpuRamIoItem",
  props: {
    cpuColorP: {
      type: String,
      default: null
    },
    ramColorP: {
      type: String,
      default: null
    },
    ioColorP: {
      type: String,
      default: null
    },
    cpuPercentageP: {
      type: Number,
      default: 0
    },
    ramPercentageP: {
      type: Number,
      default: 0
    },
    ioPercentageP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      colors: [
        {color: '#6FC4D3', percentage: 20},
        {color: '#64d96c', percentage: 40},
        {color: '#00ff1c', percentage: 60},
        {color: '#ff6100', percentage: 80},
        {color: '#f56c6c', percentage: 100}
      ],
      cpuColor: null,
      ramColor: null,
      ioColor: null,
    }
  },
  created() {

    if (this.cpuColorP == null) {
      this.cpuColor = this.colors;
    } else {
      this.cpuColor = this.cpuColorP;
    }

    if (this.ramColorP == null) {
      this.ramColor = this.colors;
    } else {
      this.ramColor = this.ramColorP;
    }

    if (this.ioColorP == null) {
      this.ioColor = this.colors;
    } else {
      this.ioColor = this.ioColorP;
    }


  },
  computed: {},
  filters: {}
}
</script>
<style scoped>
.cpuramioitem {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;


  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);


}



</style>
